<template>
<!-- 页面布局card通用组件 -->
<PageCard>

  <!-- 头部工具栏 -->
  <ToolBar>
    <el-form :model="queryForm" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="关键词:">
            <el-input v-model="queryForm.keyword" placeholder="商户名称|手机号" clearable style="100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布状态:">
            <el-select v-model="queryForm.releaseStatus" placeholder="请选择" clearable style="width: 100%;">
              <el-option
              v-for="(item, index) in this.$config.DATABASE_RELEASE_STATUS"
              :key="Number(index)"
              :label="item"
              :value="Number(index)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="启用状态:">
            <el-select v-model="queryForm.isEnabled" placeholder="请选择" clearable style="width: 100%;">
              <el-option
              v-for="(item, index) in this.$config.ENABLED_STATUS"
              :key="Number(index)"
              :label="item"
              :value="Number(index)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="default" @click="loadTableData">查询</el-button>
          <el-button type="default" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </ToolBar>

  <!-- 表格 -->
  <TablePage ref="merchantDatabaseMxTablePage" :customTableHeight="295" :loading.sync="loading" :table-data="merchantDatabaseMxTableDatas" :columns="columns" @reloadData="loadTableData"/>
</PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import { databaseMxPage } from '@/api/database'
import { databaseRelease } from '@/api/database'

export default {
  name: 'MerchantsDatabaseMxPage',
  components: {
    PageCard,
    ToolBar,
    TablePage
  },
  data() {
    return {
      loading: false,
      queryForm: null,
      initForm:{
        keyword: '',
        isEnabled: null,
        releaseStatus: null
      },
      merchantDatabaseMxTableDatas: [],
      columns: [{
        title: '商户编号',
        name: 'merchantsNo',
        fixed: 'left',
        width: 150,
        align: 'center'
      }, {
        title: '商户名称',
        name: 'merchantsName',
        fixed: 'left',
        width: 150,
        align: 'center'
      }, {
        title: '商户手机号',
        name: 'merchantsPhone',
        fixed: 'left',
        width: 150,
        align: 'center'
      }, {
        title: '资源库',
        name: 'databaseType',
          width: 150,
          align: 'center',
          select: true,
          options: this.$config.DATABASE_TYPE
        }, {
          title: '账号',
          name: 'username',
          width: 150,
          align: 'center'
        }, {
          title: '协议',
          name: 'protocol',
          width: 150,
          align: 'center'
        }, {
          title: '域名',
          name: 'domain',
          width: 450,
          align: 'center'
        }, {
          title: '端口',
          name: 'port',
          width: 150,
          align: 'center'
        }, {
          title: '库名',
          name: 'name',
          width: 200,
          align: 'center'
        }, {
          title: '修改人',
          name: 'modifyName',
          width: 150,
          align: 'center'
        }, {
          title: '创建人',
          name: 'createName',
          width: 150,
          align: 'center'
        }, {
          title: '启用状态',
          name: 'isEnabled',
          width: 150,
          align: 'center',
          select: true,
          options: this.$config.ENABLED_STATUS,
          optionsColor: ['#F56C6C', '#1afa29']
        }, {
          title: '创建时间',
          name: 'createTime',
          width: 180,
          align: 'center'
        }, {
          title: '发布状态',
          name: 'releaseStatus',
          width: 150,
          fixed: 'right',
          align: 'center',
          iconName: 'setting',
          isRotate: true,
          iconTitle: '点击查看进度',
          iconPosition: 'right',
          iconShow: (row)=> {
            return row.releaseStatus === 1
          },
          iconClick:(row)=> {
            this.databaseSyncConfig.visible = true
            this.databaseSyncConfig.databaseId = row.id
          },
          select: true,
          options: this.$config.DATABASE_RELEASE_STATUS,
          optionsColor: ['#2c2c2c', '#409eff', '#67c23a', '#f56c6c']
        }, {
          title: '发布人',
          name: 'releaseUser',
          width: 100,
          fixed: 'right',
          align: 'center',
        }, {
          title: '发布信息',
          name: 'releaseMessage',
          width: 100,
          ellipsis: true,
          fixed: 'right',
          align: 'center',
        }, {
          title: '操作',
          name: 'operate',
          width: 100,
          fixed: 'right',
          align: 'cenetr',
          operate:[{
            name: '发布',
            permission: 'DatabaseRelease',
            confirm: true,
            message: '确定发布选择的资源库吗?',
            fun: async (row, formId, grid, refresh)=> {
              await databaseRelease(row.id)
              refresh(grid)
            }
          }]
        }],
        // 监听属性
        watch: {
          '$WebSocket.databaseMessage': {
            handler(val) {
              if(!val) return
              const { msgType, eventType } = val
              if(Number(msgType) === 1314) {
                if(Number(eventType) === 610) {
                  this.loadTableData()
                }
              }
            }
          }
        }
     }
  },
  created() {
    this.queryForm = { ...this.initForm }

    this.$nextTick(()=> {
      this.loadTableData();
    })
  },
  methods: {
    // 加载数据
    async loadTableData() {
      this.loading = true
      const {pageNumber, pageSize} = this.$refs.merchantDatabaseMxTablePage.page
      const res = await databaseMxPage({pageNumber, pageSize, ...this.queryForm})
      this.$refs.merchantDatabaseMxTablePage.page.pageNumber = res.data.pageNumber
      this.$refs.merchantDatabaseMxTablePage.page.pageSize = res.data.pageSize
      this.$refs.merchantDatabaseMxTablePage.page.total = res.data.total
      this.merchantDatabaseMxTableDatas = res.data.rows
      this.loading = false
    },

    // 重置查询
    resetQuery(){
      this.queryForm = this.initForm
      this.loadTableData()
    }
  }
}
</script>